<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
	.box{
		width: 300px;
		height: 150px;
		border:solid 1px #333;
	}
	.ltr{
		background: linear-gradient(to right, #fff, #f00);
	}
	.ttb{
		background: linear-gradient(to bottom, #fff, #f00);
	}
	.trangle45{
		background: linear-gradient(45deg, #fff, #f00);
	}
	.topright{
		background: linear-gradient(to top right, #fff, #f00);
	}
	.stop{
		background: linear-gradient(to right, #fff 20%, #f00 40%);
	}
</style>
<body>
	
	<div class="box ltr"></div>
	<div class="box ttb"></div>
	<div class="box trangle45"></div>
	<div class="box topright"></div>
	<div class="box stop"></div>

</body>
</html>